---
import AsideItem from "@components/common/aside/AsideItem.astro";
import AsideTitle from "@components/common/aside/AsideTitle.astro";
---

<!-- 站点信息 -->
<AsideItem>
  <AsideTitle itemTitle="站点信息" >
    <svg
    class="w-6 h-6 mb-2"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M4 4v15a1 1 0 0 0 1 1h15M8 16l2.5-5.5 3 3L17.273 7 20 9.667"
    ></path>
  </svg>
  </AsideTitle>
  <ul class="max-w-xl space-y-1 list-disc text-gray-900 dark:text-white" th:with="info=${@webTag.selectCmsThemeByThemeName(themeName)}">
    <li class="flex justify-between mr-8">
      <span>主题名:</span>
      <span th:text="${info.themeName}">99</span>
    </li>
    <li class="flex justify-between mr-8">
      <span>作者:</span>
      <span th:text="${info.themeAuthor}">99</span>
    </li>
    <li class="flex justify-between mr-8">
      <span>文章数:</span>
      <span th:text="${@articleTag.selectArticleNum(themeName)}">99</span>
    </li>
    <li class="flex justify-between mr-8">
      <span>标签数:</span>
      <span th:text="${@articleTag.selectArticleNum(themeName)}">99</span>
    </li>
    <li class="flex justify-between mr-8">
      <span>建站时间:</span>
      <span th:text="${#dates.format(info.createTime, 'yyyy/MM/dd HH/mm')}">99</span>
    </li>
    <li class="flex justify-between mr-8" th:with="end=${#dates.format(new java.util.Date(), 'yyyy/MM/dd/HH/mm/ss')}, 
    start=${#dates.format(info.createTime, 'yyyy/MM/dd/HH/mm/ss')}">
      <span>运行时间:</span>
      <span id="runDay"  th:data-end-time="${end}" th:data-start-time="${start}">99</span>
    </li>
    <li class="flex justify-between mr-8">
      <span>最后更新时间:</span>
      <span th:text="${#dates.format(info.lastUpdate, 'yyyy/MM/dd HH:mm')}">99</span>
    </li>
  </ul>
</AsideItem>

<script>
		document.addEventListener('DOMContentLoaded', function() {
    const itemCount = document.querySelector('#runDay');
        const endTimeStr = itemCount.dataset.endTime;
        const startTimeStr = itemCount.dataset.startTime;
        const [endYear, endMonth, endDate, endHours, endMinutes,endSconds] = endTimeStr.split('/');
        const [startYear, startMonth, startDate, startHours, startMinutes,startSconds] = startTimeStr.split('/');

        const endTime = new Date(endYear, endMonth - 1, endDate, endHours, endMinutes,endSconds);
        const startTime = new Date(startYear, startMonth - 1, startDate, startHours, startMinutes,startSconds);

        const timeDiff = endTime.getTime() - startTime.getTime();
        const diffSeconds = Math.abs(timeDiff) / 1000;
        var days = Math.floor(diffSeconds / (24 * 60 * 60));
        var hours = Math.floor((diffSeconds % (24 * 60 * 60)) / (60 * 60));
        var minutes = Math.floor((diffSeconds % (60 * 60)) / 60);
		var seconds = Math.floor(diffSeconds % 60);
		itemCount.textContent = `${days}天${hours}时${minutes}分${seconds}秒`;
        // 定期更新运行时间显示（每秒更新一次）
        setInterval(() => {
        runTime();
    }, 1000);

	function runTime(){
		  seconds+=1;
        if(seconds>60)
		{   minutes+=1;
			seconds=1;
		}
		if(minutes>59)
		{   hours+=1;
			minutes=0;
		}
		if(hours>23)
		{   days+=1;
			hours=0;
		}
		itemCount.textContent = `${days}天${hours}时${minutes}分${seconds}秒`;
}
    });

</script>
